<%@page contentType="text/html" pageEncoding="UTF-8" %>

<script type="text/javascript" src="<%= request.getContextPath()%>/script/hover_button.js"></script>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<script type="text/javascript">
    var qsNum = ${fn:length(qn.questionSetsInNaire)};   // The number of the question sets.
    var currentSeq = ${param.seq};
    var qnId = ${param.qnId};
    var QUESTION_SET_PREFIX = "previewQuestionSet";
    var NEXT_BUTTON_ID = "nextBtn";
    var PREVIOUS_BUTTON_ID = "previousBtn";
    var inactiveImgFlag = "_tint.";

    function readQsBySeq(sequence) {
        currentSeq = sequence;
        $("div[name^=" + QUESTION_SET_PREFIX + "]").hide();
        $("#" + QUESTION_SET_PREFIX + sequence).show();
        $("[name^=qsTitle]").removeClass("active");
        $("#qsTitle" + sequence).addClass("active");

        if ($("#" + QUESTION_SET_PREFIX + (sequence + 1)).length == 0) {
            // If the current 'Page' is the last one.
            $("#" + NEXT_BUTTON_ID).attr("disabled", true);

            Dialogs.inactiveBtn($("#" + NEXT_BUTTON_ID), inactiveImgFlag);
        } else {
            $("#" + NEXT_BUTTON_ID).removeAttr("disabled");

            var imgSrc = $("#" + NEXT_BUTTON_ID).attr("src");
            imgSrc = imgSrc.replace(inactiveImgFlag, ".");
            $("#" + NEXT_BUTTON_ID).attr("src", imgSrc);
        }

        if ($("#" + QUESTION_SET_PREFIX + (sequence - 1)).length == 0) {
            // If the current 'Page' is the first one.
            $("#" + PREVIOUS_BUTTON_ID).attr("disabled", true);

            Dialogs.inactiveBtn($("#" + PREVIOUS_BUTTON_ID), inactiveImgFlag);
        } else {
            $("#" + PREVIOUS_BUTTON_ID).removeAttr("disabled");

            var imgSrc = $("#" + PREVIOUS_BUTTON_ID).attr("src");
            imgSrc = imgSrc.replace(inactiveImgFlag, ".");
            $("#" + PREVIOUS_BUTTON_ID).attr("src", imgSrc);
        }

        changeTitle(sequence);
    }

    /**
     * View the content of the next question set.
     */
    function nextQs() {
        readQsBySeq(++currentSeq);
    }

    function previousQs() {
        readQsBySeq(--currentSeq);
    }

    function changeTitle(sequence) {
        $("#pageTitle").html($("#qsTitle" + sequence).attr("content"));
    }

    $(document).ready(function () {
        var initPage = function () {
            if (qsNum == 0) {
                $("#previewContent2").html("<b>This dialog has no pages.</b>");
            } else if (qsNum == 1) {
                $("#previousBtn").attr("disabled", true);
                Dialogs.inactiveBtn($("#" + PREVIOUS_BUTTON_ID), inactiveImgFlag);

                $("#nextBtn").attr("disabled", true);
                Dialogs.inactiveBtn($("#" + NEXT_BUTTON_ID), inactiveImgFlag);

                changeTitle(1);
            } else {
                changeTitle(1);
                if (currentSeq == 1) {
                    $("#previousBtn").attr("disabled", true);
                    Dialogs.inactiveBtn($("#" + PREVIOUS_BUTTON_ID), inactiveImgFlag);
                } else if (currentSeq == qsNum) {
                    $("#nextBtn").attr("disabled", true);
                    Dialogs.inactiveBtn($("#" + NEXT_BUTTON_ID), inactiveImgFlag);
                }
            }
        }

        initPage();
    });
</script>

<ul class="page">
    <li class="previous">
        <input type="image" id="previousBtn" src="<%=request.getContextPath()%>/images/btn/btn_previous.gif"
               alt="previous" class="btn" style="float:left;" onclick="previousQs();return false;"/>
    </li>
    <li class="next">
        <input type="image" id="nextBtn" src="<%=request.getContextPath()%>/images/btn/btn_next.gif"
               alt="view" class="btn" onclick="nextQs();return false;"/>
    </li>
</ul>

<h3 id="pageTitle"></h3>

<div class="scrollbar" style="height:560px;">
<div id="previewContent2" style="width:640px;float:left;">
    <c:forEach var="questionList" items="${questionSets}" varStatus="i">
        <div id="previewQuestionSet${i.index + 1}" name="previewQuestionSet${i.index + 1}" class="preview_page"
             style="${i.index != 0 ? 'display:none' : ''}">
            <c:forEach var="question" items="${questionList}">
                <!-- Get the indent level for each questions -->
                <c:set var="indentLevel" value="${fn:substring(fn:length(question.sequence) / 2, 0, 1) + 1}"/>

                <dl class="line${indentLevel}">
                    <dt>${question.sequence} ${question.text}</dt>

                    <!-- If the response type is system reserved. -->
                    <!-- Begin: System Reserved Response -->
                    <c:if test="${question.responseType == 'Yes/No'}">
                        <dd>
                            <input name="" type="radio" value=""/>
                            Yes
                        </dd>
                        <dd>
                            <input name="" type="radio" value=""/>
                            No
                        </dd>
                    </c:if>

                    <c:if test="${question.responseType == 'No/Yes'}">
                        <dd>
                            <input name="" type="radio" value=""/>
                            No
                        </dd>
                        <dd>
                            <input name="" type="radio" value=""/>
                            Yes
                        </dd>
                    </c:if>

                    <c:if test="${question.responseType == 'US States'}">
                        <select>
                            <c:forEach var="response" items="${question.responses}">
                                <option>${response.label}</option>
                            </c:forEach>
                        </select>
                    </c:if>

                    <c:set var="rt" value="${question.responseType}"/>
                    <c:if test="${rt == 'Social Security Number' or rt == 'Phone Number' or rt == 'Email Address'}">
                        ${question.responses[0].label}:
                        <input type="text"/>
                    </c:if>
                    <!-- End: System Reserved Response Type -->

                    <!-- If the response type is custom, the responseType of the question is empty. -->
                    <c:if test="${question.responseType == null && question.uiType != 'Dropdown'}">
                        <c:forEach var="response" items="${question.responses}">
                            <dd>
                                <c:if test="${question.uiType == 'Radio Button'}">
                                    <input name="" type="radio" value=""/>
                                    ${response.label}
                                    <br/>
                                </c:if>

                                <c:if test="${question.uiType == 'Check Box'}">
                                    <input name="" type="checkbox" value=""/>
                                    ${response.label}
                                    <br/>
                                </c:if>
                            </dd>
                        </c:forEach>

                        <dd>
                            <c:if test="${question.responseType == null && question.uiType == 'Text Box' && rt != 'Display'}">
                                <input type="text" value=""/>
                            </c:if>

                            <c:if test="${question.responseType == null && question.uiType == 'Text Area'}">
                                <textarea></textarea>
                            </c:if>
                        </dd>
                    </c:if>

                    <c:if test="${question.responseType == null && question.uiType == 'Dropdown'}">
                        <select>
                            <c:forEach var="response" items="${question.responses}">
                                <option>
                                        ${response.label}
                                </option>
                            </c:forEach>
                        </select>
                    </c:if>

                    <c:if test="${rt == 'Display'}">
                        <input type="text" style="width:${question.width}px" disabled=""/>
                    </c:if>
                </dl>
            </c:forEach>
        </div>
    </c:forEach>
</div>

<ul class="sidebar">
    <c:forEach var="qsin" items="${qn.sortedPages}">
        <li id="qsTitle${qsin.sequence}" name="qsTitle${qsin.sequence}" content="${qsin.questionSet.displayTitle}"
            class="${qsin.sequence == param.seq ? 'active' : ''}">
            <a href="#" onclick="readQsBySeq(${qsin.sequence});return false;">
                    ${qsin.questionSet.displayTitle}
            </a>
        </li>
    </c:forEach>
</ul>
</div>
<!--END: popup -->